<template>
  <ve-table border-y fixed-header :max-height="300" :columns="columns" :table-data="tableData" :footer-data="footerData"
    rowKeyFieldName="rowKey" />
</template>

<script setup>
import { reactive } from 'vue';

const columns = reactive([
  { field: "name", key: "a", title: "Name", align: "center" },
  { field: "date", key: "b", title: "Date", align: "left" },
  {
    field: "hobby",
    key: "c",
    title: "Hobby",
    align: "center",
  },
  {
    field: "address",
    key: "d",
    title: "Address",
    align: "left",
  },
])

const tableData = reactive([])
const footerData = reactive([])

function initTableData() {
  let data = [];
  for (let i = 0; i < 15; i++) {
    data.push({
      rowKey: i,
      name: i,
      date: i,
      hobby: i,
      address: i,
    });
  }
  Object.assign(tableData, data)
}
initTableData()

function initFooterData() {
  let data = [
    {
      rowKey: 0,
      name: "平均值",
      date: 213,
      hobby: 355,
      address: 189,
    },
    {
      rowKey: 1,
      name: "汇总值",
      date: 1780,
      hobby: 890,
      address: 2988,
    },
  ];
  Object.assign(footerData, data)
}
initFooterData()

</script>
